<template>
  <div class="roll-box">
    <div class="roll-list" v-if="roomList.length">
      <div class="roll-item" v-for="item in roomList" :key="item.id" @click="toRoll(item.id)">
        <div class="avatar">
          <img :src="item.avatar ? item.avatar : defaultAvater" alt="" />
          <div v-if="!item.avatar" class="badge">官方</div>
        </div>
        <div class="detalis">
          <div class="title">{{item.room_name}}</div>
          <div class="imgs">
            <img
              v-for="skin in item.main_skins" :key="skin.id"
              :src="skin.image_url"
              alt=""
            />
          </div>
          <div class="info">
            <div>奖池：<span class="coin">{{item.prize_pool}}</span></div>
            <div>件数：{{item.award_num}}</div>
            <div>人数：{{item.max_join_num}}</div>
          </div>
        </div>
        <div class="mobile-imgs">
          <img
            v-for="skin in item.main_skins" :key="skin.id"
              :src="skin.image_url"
          />
        </div>
        <div class="countdown">
          <div>距开奖还剩：</div>
          <p>
            <span>{{item.countdown.d}}</span>天<span>{{item.countdown.h}}</span>时<span>{{item.countdown.m}}</span>分<span>{{item.countdown.s}}</span>秒
          </p>
        </div>
      </div>
    </div>
    <el-empty v-else :image-size="300" :image="logo" description="暂无数据" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, inject, toRefs } from "vue";
import { RollService } from "@/services/RollService"
import { formatRemainTime } from "@/utils"
import defaultAvater from "@/static/img/roll/default_avatar.png"
import { useRouter } from "vue-router";
import logo from "@/static/img/logo.png"
export default defineComponent({
  name: "Roll",
  setup() {
    const router = useRouter()
    const state = reactive({
      roomList: []
    })
    const closeDialog = inject("closeDialog")

    onMounted(async() => {
      await getRoomList()
      startCountdown()
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    let timer = 0
    function startCountdown() {
      clearInterval(timer)
      timer = setInterval(() => {
        state.roomList.forEach(v => v.countdown = formatRemainTime(v.lottery_time * 1000))
      }, 1000)
    }

    async function getRoomList() {
      let resp = await RollService.getRoomList({
        i_created: false,
        is_join: false,
        lottery_status: 0,
        no_password_room: true,
        order: "desc",
        room_type: -1,
        sort: "prize_pool"
      });
      let { data: {list, total} } = resp.data
      //console.log(list);
      
      state.roomList = list.map(v => {
        v.countdown = formatRemainTime(v.lottery_time * 1000)
        v.main_skins.splice(3)
        return v
      })
    }

    function toRoll(id: number) {
      router.push(`/roll/${id}`)
      closeDialog()
    }

    return {
      defaultAvater,
      logo,
      ...toRefs(state),
      toRoll
    };
  },
});
</script>

<style lang="scss" scoped>
.roll-box {
  width: 100%;
  height: 516px;
  overflow-y: auto;
  scroll-behavior: smooth;

  .roll-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
  }

  .roll-item {
    cursor: pointer;
    width: 689px;
    height: 160px;
    background-color: #110836;
    border-radius: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    .mobile-imgs {
      display: none;
    }

    .avatar {
      width: 90px;
      height: 90px;
      border: 2px solid #ffea00;
      border-radius: 50%;
      margin-left: 26px;
      margin-right: 16px;
      position: relative;
      display: flex;
      justify-content: center;
      img {
        width: 100%;
        border-radius: 50%;
      }
      .badge {
        width: 40px;
        height: 20px;
        background-color: #ffea00;
        position: absolute;
        bottom: -10px;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        color: #000;
      }
    }

    .detalis {
      margin-right: 10px;
      color: #cfcce7;
      .title {
        font-size: 14px;
        font-weight: bold;
      }
      .imgs img {
        margin-right: 10px;
        width: 70px;
      }

      .info {
        display: flex;
        justify-content: space-between;
        span {
          color: #ffea00;
        }
      }
    }

    .countdown {
      font-size: 14px;
      font-weight: bold;
      color: #cfcce7;
      p {
        color: #ffea00;
      }
      div {
        margin-left: 5px;
      }
      span {
        display: inline-block;
        height: 24px;
        width: 24px;
        text-align: center;
        border: 1px solid rgba(255, 234, 0, 0.1);
        margin: 5px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .roll-box {
    height: auto;
    .roll-list {
      padding-top: 20px;
    }

    .roll-item {
      width: 94%;
      height: auto;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .mobile-imgs {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin: 10px;
        img {
          display: block;
          width: 104px;
        }
      }

      .avatar {
        width: 55px;
        height: 55px;
        margin: 10px 10px 0 10px;
        .badge {
          width: 30px;
          height: 15px;
          font-size: 8px;
          bottom: -5px;
        }
      }

      .detalis {
        margin-top: 15px;
        width: 75%;
        .imgs {
          display: none;
        }
      }

      .countdown {
        width: 100%;
        display: flex;
        align-items: center;
        margin-left: 5px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>